import { NavLink, useNavigate } from "react-router-dom"
import css from "./index.module.css"
import { Button, Select, Input, Space } from "antd"
import { useState } from "react"
import { LoginAvatar } from "../LoginAvatar"
type Props = {
  open: () => void
}
// Input.Search
export const Header = ({ open }: Props) => {
  const navigate = useNavigate()
  // 搜索逻辑
  const [selectValue, setSelectValue] = useState("issue")
  const onChangeHandler = (val: string) => {
    // console.log(e)
    setSelectValue(val)
  }
  const onSearchHanlder = (val: string) => {
    console.log(val)
    // 搜索内容，搜索类别
    // selectValue

    // 1.跳转页面
    if (val === "") {
      navigate("/")
    } else {
      navigate("/search", {
        state: {
          searchValue: val,
          searchType: selectValue,
        },
      })
    }
  }
  return (
    <div className="header">
      {/* logo */}
      <img src="../../logo2.png" alt="" className={css.logo} />
      {/* 导航 */}
      <nav className={css.navWrapper}>
        <NavLink to="/issues">
          <Button type="link">问答</Button>
        </NavLink>

        <NavLink to="/books">
          <Button type="link">书籍</Button>
        </NavLink>
        <NavLink to="/qa">
          <Button type="link">面试题</Button>
        </NavLink>
        <NavLink to="https://niaodi.cn" target="new">
          <Button type="link">视频教程</Button>
        </NavLink>
      </nav>
      {/* 搜索 */}
      <div className={css.searchWrapper}>
        <Space.Compact>
          <Select
            style={{ width: "70px" }}
            value={selectValue}
            onChange={onChangeHandler}
            options={[
              { value: "book", label: "书籍" },
              { value: "issue", label: "问答" },
            ]}
          ></Select>
          <Input.Search
            onSearch={(e) => onSearchHanlder(e)}
            allowClear
            enterButton="搜索"
            style={{ width: "200px" }}
          ></Input.Search>
        </Space.Compact>
      </div>
      {/* 登录 */}
      <div className={css.loginWrapper}>
        <LoginAvatar open={open}></LoginAvatar>
      </div>
    </div>
  )
}

// 组件
// function myInput() {
//   return <input type="text" />
// }

// myInput.Search = function () {
//   return <input type="text" />
// }
